<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="formRule"
        :rules="formRule"
        :model="queryParams"
        label-position="right"
        label-width="130px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="最大挂高:">
              <el-input
                maxlength="12"
                v-model="queryParams['hangHeight']"
                oninput="value=value.replace(/^[0][0-9]|[^|\-\d.]/g, '').replace(/^(\-)*(\d{1,9})\.(\d\d\d).*$/, '$1$2.$3')"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目编码:" prop="prjCode">
              <el-input
                v-model="queryParams['prjCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址产权性质:">
              <el-input
                v-model="queryParams['propertyId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="requestId">
              <el-input
                v-model="queryParams['requestId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校验规则编号:" prop="ruleNo">
              <el-select
                v-model="queryParams['ruleNo']"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址编码:">
              <el-input
                v-model="queryParams['stationCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="塔高:">
              <el-input
                v-model="queryParams['towerHeight']"
                placeholder="请输入"
                @input="change($event)"
                oninput="value=value.replace(/^[0][0-9]|[^\-\d.]/g, '').replace(/^(\-)*(\d{1,9})\.(\d\d\d).*$/, '$1$2.$3')"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="铁塔ID:">
              <el-input
                v-model="queryParams['towerId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div>
              <span>调用次数/日：</span><span>{{ query.count }}</span>
            </div>
            <div>
              <span>拦截比率：</span><span>{{ query.rate }}</span>
            </div>
            <div>
              <a
                class="link"
                href="javascript:;"
                @click="$router.push({ name: 'biz-ml' })"
                >详情</a
              >
            </div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              CRM系统订单起租前调用内存数据库接口，实现订单关联站址状态、塔高、挂高等资源信息的一致性实时校验。
            </div>
          </div>
          <div class="page-tip">
            <div class="params-tip" @click.ctrl.alt="clickExample">
              <span>示例参数</span>：项目编码:22A04XJKS0101282, 订单编号:1221111910732314, 校验规则编号:订单关联铁塔的【塔高】和资源系统中铁塔【塔高】一致, 站址编码:659003500010001469, 塔高:35, 铁塔ID:500188430000000001523135
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item, index) in dialogData" :key="index">
                <el-col> 订单编号: {{ item.requestId }} </el-col>
                <el-col>
                  校验结果: {{ item.verifyCode === "1" ? "通过" : "未通过" }}
                </el-col>
                <el-col> 说明: {{ item.returnMsg || "无" }} </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import mixin from './mixins'
export default {
  name: "infoCheckOfConformance", //起租前同一个订单关联站址状态和挂高等基础信息的一致性校验
  mixins: [mixin],
  data() {
    return {
      query: {
        count: 0,
        rate: "--"
      },
      dialogData: [],
      queryParams: {
        hangHeight: "",
        prjCode: "",
        propertyId: "",
        requestId: "",
        ruleNo: "",
        stationCode: "",
        towerHeight: "",
        towerId: ""
      },
      options: [
        {
          label: "订单关联站址在公共库【站址状态】为在网",
          value: "1"
        },
        {
          label:"订单关联站址的【站址产权性质】和公共库中该站址的【站址产权性质】一致",
          value: "2"
        },
        {
          label: "订单关联铁塔的【塔高】和资源系统中铁塔【塔高】一致",
          value: "3"
        },
        {
          label: "订单中【最大挂高】小于等于订单关联铁塔在资源系统中的【塔高】",
          value: "4"
        }
      ],
      formRule: {
        ruleNo: [
          {
            required: true,
            message: "请选择校验规则编号",
            trigger: "blur"
          }
        ],
        requestId: [
          {
            required: true,
            message: "请输入订单编号",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.queryPageCount("4.1");
  },
  mounted() {},
  methods: {
    async buttonClick() {
      try {
        await this.$refs["formRule"].validate();
        this.dialogData = [];
        var params = {
          datas: [
            {
              hangHeight: Number(this.queryParams.hangHeight) || -999999,
              prjCode: this.queryParams.prjCode || "*",
              propertyId: this.queryParams.propertyId || "*",
              requestId: this.queryParams.requestId,
              ruleNo: this.queryParams.ruleNo,
              stationCode: this.queryParams.stationCode || "*",
              towerHeight: Number(this.queryParams.towerHeight) || -999999,
              towerId: this.queryParams.towerId || "*"
            }
          ]
          
        };
        //console.log(params)
        const r = await this.$http({
          url: this.$http.adornBizUrl("/leasePre/order"),
          method: "post",
          data: this.$http.adornData("param=" + JSON.stringify(params), false),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data.length > 0) {
          //console.log(r)
          this.dialogData = r.data.data;
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    reset() {
      this.queryParams = {
        hangHeight: "",
        prjCode: "",
        propertyId: "",
        requestId: "",
        ruleNo: "",
        stationCode: "",
        towerHeight: "",
        towerId: ""
      };
      this.dialogData = [];
      this.$refs["formRule"].clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },
    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl("/log/queryStatistics"),
          method: "post",
          data: this.$http.adornData(
            "param=" + JSON.stringify({ scene: scene }),
            false
          ),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data && r.data.data.length > 0) {
          var result = r.data.data[0];
          this.query.count = result.cnt || "0";
          this.query.rate =
            result.per == null ? "--" : (result.per * 100).toFixed(1) + "%";
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/_formatQueryPage";
@include formatQueryPage(130px, 60%, right);
.el-input {
  width: 60%;
}

.el-select {
  width: 60%;
}

.query {
  color: rgba(255, 255, 255, 1);
  background: rgba(235, 75, 75, 1);
  border-radius: 6px;
  border-color: rgba(235, 75, 75, 1);
}
</style>
